import React, { Component, useEffect, useState } from 'react';
import { PlusOutlined } from '@ant-design/icons';
import { Button, Input, Form, Select, Tag } from 'antd';
import LineBox from '@/components/LineBox'
import Tablelay from '@/components/TableLay'
//引入form组件
import FormLay from '@/components/FormLay'
import ModalLay from '@/components/ModalLay'
import { getGoods } from '@/network/goods'
import './Blindbox.scss'


const Blindbox = () => {
    //定义state
    let [page, setPage] = useState(1);
    let [limit, setLimit] = useState(5);
    let [addShow, setAddShow] = useState(false);
    let [source, setSource] = useState([]);//table数据
    let [total, setTotal] = useState(0);//总条数
    //表单默认值
    let [search, setSearch] = useState({
        name: "",
        type: null
    });

    //模拟挂载完成周期
    useEffect(() => {
        async function fetchData() {
            let res = await getGoods({
                goods_type: "",
                cate_id: '',
                status: 1,
                name: '',
                page: page,
                limit: limit
            })
            setSource(res.data.data.rows)
            setTotal(res.data.data.total);
        }
        fetchData();
    }, [page, limit]);

    //获取form对象
    const [form] = Form.useForm();
    const [formSearch] = Form.useForm();

    //form配置
    let fromConfig = [
        {
            label: "标签名称",
            placeholder: "盲盒名称",
            name: "name",
            ele: Input,
            rules: [
                {
                    required: true,
                    message: "盲盒名称不能为空!"
                },
            ]
        },
        {
            label: "商品类型",
            placeholder: "商品类型",
            name: "type",
            ele: () => {
                return <Select
                    style={{
                        width: 120,
                    }}
                    placeholder='请选择'
                    allowClear
                    options={[
                        {
                            value: 1,
                            label: '普通商品',
                        },
                        {
                            value: 2,
                            label: '盲盒商品',
                        },
                    ]}
                />
            },
        }
    ]
    //table列配置
    let tableColumns = [
        {
            title: '商品ID',
            dataIndex: 'id',
            key: 'id',
        },
        {
            title: '商品图',
            dataIndex: 'image',
            key: 'image',
            render(_, scoped) {
                return <img className='tabimg' src={_} alt="" />;
            }
        },
        {
            title: '商品名称',
            dataIndex: 'name',
            key: 'name',
            width: 220
        },
        {
            title: '商品分类',
            dataIndex: 'cate',
            key: 'cate',
            render(_, scoped) {
                return _.name;
            }
        },
        {
            title: '商品类型',
            dataIndex: 'goods_type',
            key: 'goods_type',
            render(_, scoped) {
                return _ === 1 ? <Tag color="red">普通商品</Tag> : <Tag color="green">盲盒商品</Tag>;
            }
        },
        {
            title: '操作',
            dataIndex: '',
            render(_, scoped) {
                return (
                    <>
                        <Button type="link">编辑</Button>
                        <Button type="link">删除</Button>
                    </>
                )
            }
        }
    ]
    //搜索方法
    let searchHandler = (formData) => {
        console.log("表单", search);

        let params = { ...formData, page, limit }
        console.log(params);
    }
    //点击添加
    let add = () => {
        setAddShow(true);
    }
    //OK
    let okModal = async () => {
        //点击模态框确认
        //form表单动态校验
        try {
            let values = await form.validateFields();
            console.log(values);
            setAddShow(false);
        }
        catch (error) {
            //校验失败
            console.log(error);
        }
    }
    //关闭添加模态框
    let closeHanlder = () => {
        setAddShow(false);
    }
    //table表格选择的行
    let checkRows = (row, keys) => {
        console.log("选中行", row, keys);
    }
    //分页器事件
    let changePage = (page, pageSize) => {
        setPage(page);
        setLimit(pageSize);
    }
    return (
        <>
            <div className='blindbox padd20'>
                {/* form表单 */}
                <LineBox>
                    <FormLay form={formSearch} name='searchForm' formLayout='inline' onSearch={searchHandler} initial={search} fromConfig={fromConfig} >
                        <Button type="primary" htmlType='submit'>搜索</Button>
                    </FormLay>
                </LineBox>
                <LineBox><Button onClick={add} type="primary" icon={<PlusOutlined />}>添加盲盒</Button></LineBox>
                {/* table组件 */}
                <Tablelay pagination={{
                    position: ['bottomLeft'],
                    current: page,
                    total: total,
                    pageSize: limit,
                    showSizeChanger: true,
                    showQuickJumper: true,
                    pageSizeOptions: [5, 10, 15, 20],
                    onChange: changePage
                }} onCheckRow={checkRows} rowKey='id' dataSource={source} columns={tableColumns}></Tablelay>
                {/* 模态框后置 */}
                <ModalLay title='新增盲盒' isModalOpen={addShow} onCloseModal={closeHanlder} onOkModal={okModal} okText='确认' cancelText='取消'>
                    <FormLay form={form} name='addForm' onSearch={searchHandler} initial={search} fromConfig={fromConfig} ></FormLay>
                </ModalLay>
            </div>
        </>
    )
}

export default Blindbox;
